<template>
  <div class="DiyRubiks">
    <div class="decorate-cube" ref="decorate_cube">
      <ul class="cube-row" v-for="n in comObj.lineNum" :key="n" >
        <li
          :class="['cube-item',{'item-selecting': isSelecting(i,n),'item-selected':isSelected(i,n) }]"
          v-for="i in comObj.rowNum"
          :style="{'width':'100%','height':cubeItemHeight+'px'}"
          :data-x="i"
          :data-y="n"
          :key="i+1"
        >
          <!-- <van-icon name="plus" color="#bbbbb" :style={'line-height':cubeItemHeight+'px'} /> -->
        </li>
      </ul>

      <template v-if="comObj.selectedCube.length>0">
        <div
          class="cube-selected"
          v-for="(item, index) in comObj.selectedCube"
          :key="'select'+index"
          :style="{'backgroundImage':item.backImg,'width':getCubeSelectedWidth(item)+'%','height':getCubeSelectedHeight(item)+'px','top':getCubeSelectedTop(item)+'px','left':getCubeSelectedLeft(item)+'px'}"
        >
          <div class="cube-selected-text">
            {{index + 1}}
          </div>
        </div>
      </template>
      <!-- 热区 -->
      <div class="hotspotMode">
        <template v-for="(item, index) in comObj.hotData">
          <div :key="index" class="hotspot" :style="{'top':item.top + 'px', 'left': item.left +'px','zIndex':(Number(index) + 1)*2}" @click="selectHotArea(item,index)"></div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["comObj"],
  name: "DiyRubiks",
  data() {
    return {
      density: 4, // 密度
      cubeWidth: 375, // 魔方宽度
      cubeHeight: 375, // 魔方高度
      cudeSelecting: {
        start: null,
        end: null,
        data: []
      },
      cudeSelected: [] // 已经生成的单元
    };
  },
  mounted() {
    console.log(this.comObj)
  },
  watch: {
    comObj(val) {
      console.log(val)
    }
  },
  computed: {
    ...mapGetters(["rubils"]),
    // 单元魔方高度
    cubeItemHeight: function() {
      return this.cubeHeight / this.density;
    }
  },
  methods: {
    selectHotArea(item, idx) {
      console.log(idx);
      this.rubils.selectHotIdx = idx;
      this.rubils.selectHotTop = item.top;
      this.rubils.selectHotLeft = item.left;
      this.rubils.selectHotLink = item.link;
      this.$store.commit("Rubiks/Set_rubils", this.rubils);
      // 更新vuex里面的PageJSON
      this.$store.dispatch("apply/PageJSONUpData");
      // 更新父组件中的PageJSON5
      this.$emit("updataNowPageJSON");
    },
    // 判断是否正在选择
    isSelecting: function(x, y) {
      var cudeSelectingData = this.cudeSelecting.data;
      for (var i = 0, len = cudeSelectingData.length; i < len; i++) {
        var coord = cudeSelectingData[i];
        if (
          parseInt(coord.x) === parseInt(x) &&
          parseInt(coord.y) === parseInt(y)
        ) {
          return true;
        }
      }
      return false;
    },
    // 判断是否已经选择
    isSelected: function(x, y) {
      var list = this.cudeSelected;
      for (var i = 0; i < list.length; i++) {
        var data = list[i].data;
        for (var j = 0; j < data.length; j++) {
          var coord = data[j];
          if (
            parseInt(coord.x) === parseInt(x) &&
            parseInt(coord.y) === parseInt(y)
          ) {
            return true;
          }
        }
      }
      return false;
    },
    // 计算选中层的宽度
    getCubeSelectedWidth: function(item) {
      return (
        (parseInt(item.end.y) - parseInt(item.start.y) + 1) * (100 / this.comObj.lineNum)
      );
    },
    // 计算选中层的高度
    getCubeSelectedHeight: function(item) {
      return (
        (parseInt(item.end.x) - parseInt(item.start.x) + 1) *
        this.cubeItemHeight
      );
    },
    // 计算选中层的上边距离
    getCubeSelectedTop: function(item) {
      return (item.start.x - 1) * this.cubeItemHeight;
    },
    // 计算选中层的左边距离
    getCubeSelectedLeft: function(item) {
      var boxWeight = this.$refs.decorate_cube.offsetWidth;
      return (item.start.y - 1) * (boxWeight / this.comObj.lineNum);
    }
  }
};
</script>

<style lang="scss" scoped>
.decorate-cube {
  width: 100%;
  position: relative;
  display: flex;

  .hotspotMode {
    position: absolute;
    width: 100%;
    height: 100%;

    .hotspot {
      position: absolute;
      width: 80px;
      height: 80px;
      background: #6495ed69;
      z-index: 9;
    }
  }
}
.decorate-cube .cube-row:last-of-type .cube-item {
  border-right: 1px solid #e5e5e5;
}
.decorate-cube .cube-selected {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ebedf0;
  text-align: center;
  color: #7d7e80;
  cursor: pointer;
  box-sizing: border-box;
  background-size: 100% 100%;
}
.decorate-cube .cube-selected.cube-selected-click {
  background: #e0edff;
  border: 1px solid #155bd4;
  color: #155bd4;
  z-index: 2;
  cursor: auto;
}
.decorate-cube .cube-selected-text {
  font-size: 12px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.decorate-cube .cube-row {
  // float: left;
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.decorate-cube .cube-item:first-child {
  border-top: 1px solid #e5e5e5;
}
.decorate-cube .cube-item {
  background: #f8f8f8;
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.decorate-cube .cube-item.item-selecting {
  background: #e0edff;
}
.decorate-cube .cube-item.item-selecting .van-icon {
  display: none;
}
.decorate-cube .cube-item.item-selected {
  background: #e0edff;
  visibility: hidden;
}
.decorate-cube .cube-item.item-selected .van-icon {
  display: none;
}
</style>
